<template>
	<view class="register">
		<u-form :model="ruleForm" ref="ruleForm" label-width="150">
			<u-form-item label="昵称" prop="name">
				<u-input v-model="ruleForm.name" placeholder="请输入昵称" />
			</u-form-item>
			<u-form-item label="邮箱" prop="email">
				<u-input v-model="ruleForm.email" placeholder="请输入邮箱" />
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input type='password' v-model="ruleForm.password" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="确认密码" prop="password_confirmation">
				<u-input type='password' v-model="ruleForm.password_confirmation" placeholder="请确认密码" />
			</u-form-item>
			<u-form-item label="openid" prop="openid">
				<u-input v-model="ruleForm.openid" placeholder="请输入微信公众平台openid" />
			</u-form-item>
		</u-form>
		<u-button @click="submit" type="primary" class="btn">提交</u-button>
	</view>
</template>

<script>
	import {
		register
	} from "../../../common/http.api.js"
	export default {
		data() {
			return {
				fileList: [],
				ruleForm: {},
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: 'blur',
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: "blur",
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.email(value);
						},
						message: '邮箱格式错误',
						trigger: "blur",
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}, {
						min: 6,
						message: '密码不少于6个字符',
						trigger: 'blur'
					}, ],
					password_confirmation: [{
						required: true,
						message: '请确认密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: "blur",
					}, {
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error('请再次输入密码'));
							} else if (value !== this.ruleForm.password) {
								callback(new Error('两次输入密码不一致'));
							} else {
								callback()
							}
						},
						// 触发器可以同时用blur和change
						trigger: 'blur',
					}],
					openid: [{
						message: '请输入微信公众平台openid',
						// 可以单个或者同时写两个触发验证方式 
						trigger: "blur",
					}]
				}
			};
		},
		methods: {
			submit() {
				this.$refs.ruleForm.validate(valid => {
					uni.showLoading({
						title: "提交中"
					})
					if (valid) {
						const params = {
							name: this.ruleForm.name,
							email: this.ruleForm.email,
							password: this.ruleForm.password,
							password_confirmation: this.ruleForm.password_confirmation,
							openid: this.ruleForm.openid
						}
						this.$u.api.register(params).then(res => {
							uni.hideLoading();
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/auth/login'
								})
							},2000)
						})

					} else {
						uni.hideLoading()
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.ruleForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.register {
		padding: 40rpx;

		.btn {
			margin-top: 20rpx;
		}
	}
</style>
